import {TypedUseSelectorHook, useDispatch as useReduxDispatch, useSelector as useReduxSelector} from "react-redux";
import {configureStore, combineReducers} from "@reduxjs/toolkit";
import {persistStore, persistReducer} from "redux-persist";
import storage from "redux-persist/lib/storage";
import globalSlice from '@/store/modules/global'
import menuSlice from "@/store/modules/menu";
import loginSlice from "@/store/modules/login";
import userSlice from "@/store/modules/user";
import tabsSlice from '@/store/modules/tabs'


const reducer = combineReducers({
    globalSlice,
    loginSlice,
    userSlice,
    menuSlice,
    tabsSlice,
})
const persistConfig = {
    key: "rtk-state",
    storage: storage,
    whitelist: ['globalSlice', 'tabsSlice']
};
export const store = configureStore({
    reducer: persistReducer(persistConfig, reducer),
    //解决redux-toolkit 报无法序列化Warning：A non-serializable value was detected in an action
    middleware: getDefaultMiddleware => getDefaultMiddleware({serializableCheck: false}),
    devTools: true,
})
export const persist = persistStore(store);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;
export const useDispatch = () => useReduxDispatch<AppDispatch>();
